<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />

	<title>Nette\Forms example 2 | Nette Framework</title>

	<style type="text/css">
	<!--
	.required {
		color: darkred
	}

	fieldset {
		padding: .5em;
		margin: .3em 0;
		background: #EAF3FA;
		border: 1px solid #b2d1eb;
	}

	input.button {
		font-size: 120%;
	}

	th {
		width: 8em;
		text-align: right;
	}
	-->
	</style>
</head>

<body>
	<h1>Nette\Forms example 2</h1>

	<form action="" method="post" enctype="multipart/form-data" onsubmit="return validate(this)">

<fieldset>
<legend>Personal data</legend>
<p>We value your privacy and we ensure that the information you give to us will not be shared to other entities.</p>

<table>
<tr class="required">
	<th><label class="required" for="frm-name">Your name:</label></th>

	<td><input type="text" size="35" class="text" name="name" id="frm-name" value="John Doe" /></td>
</tr>

<tr class="required">
	<th><label class="required" for="frm-age">Your age:</label></th>

	<td><input type="text" size="5" class="text" name="age" id="frm-age" value="" /></td>
</tr>

<tr>
	<th><label>Your gender:</label></th>

	<td><input type="radio" name="gender" id="frm-gender-0" value="m" /><label for="frm-gender-0">male</label><br /><input type="radio" name="gender" id="frm-gender-1" value="f" /><label for="frm-gender-1">female</label><br /></td>
</tr>

<tr>
	<th><label for="frm-email">E-mail:</label></th>

	<td><input type="text" size="35" class="text" name="email" id="frm-email" value="&#64;" /></td>
</tr>
</table>
</fieldset>

<fieldset>
<legend>Shipping address</legend>

<table>
<tr>
	<th>&nbsp;</th>

	<td><input type="checkbox" onclick="toggle(this)" name="send" id="frm-send" /><label for="frm-send">Ship to address</label></td>
</tr>
</table>

<div id="sendBox">
<table>
<tr>
	<th><label for="frm-street">Street:</label></th>

	<td><input type="text" size="35" class="text" name="street" id="frm-street" value="" /></td>
</tr>

<tr>
	<th><label for="frm-city">City:</label></th>

	<td><input type="text" size="35" class="text" name="city" id="frm-city" value="" /></td>
</tr>

<tr>
	<th><label onclick="return false" for="frm-country">Country:</label></th>

	<td><select onfocus="this.onmousewheel=function(){return false}" name="country" id="frm-country"><option value="0">Select your country</option><optgroup label="Europe"><option value="CZ" selected="selected">Czech Republic</option><option value="FR">France</option><option value="DE">Germany</option><option value="GR">Greece</option><option value="HU">Hungary</option><option value="IE">Ireland</option><option value="IT">Italy</option><option value="NL">Netherlands</option><option value="PL">Poland</option><option value="SK">Slovakia</option><option value="ES">Spain</option><option value="CH">Switzerland</option><option value="UA">Ukraine</option><option value="GB">United Kingdom</option></optgroup><option value="AU">Australia</option><option value="CA">Canada</option><option value="EG">Egypt</option><option value="JP">Japan</option><option value="US">United States</option><option value="?">other</option></select></td>
</tr>
</table>
</div>
</fieldset>

<fieldset>
<legend>Your account</legend>

<table>
<tr class="required">
	<th><label class="required" for="frm-password">Choose password:</label></th>

	<td><input type="password" size="20" class="text" name="password" id="frm-password" value="" /></td>
</tr>

<tr>
	<th><label for="frm-password2">Reenter password:</label></th>

	<td><input type="password" size="20" class="text" name="password2" id="frm-password2" value="" /></td>
</tr>

<tr>
	<th><label for="frm-avatar">Picture:</label></th>

	<td><input type="file" class="text" name="avatar" id="frm-avatar" /></td>
</tr>

<tr>
	<th><label for="frm-note">Comment:</label></th>

	<td><textarea cols="30" rows="5" name="note" id="frm-note"></textarea></td>
</tr>
</table>
</fieldset>

<fieldset>
<table>
<tr>
	<th>&nbsp;</th>

	<td><input type="submit" class="button" name="submit1" id="frm-submit1" value="Send" /></td>
</tr>
</table>
</fieldset>

<div><input type="hidden" name="userid" id="frm-userid" value="231" /></div>
</form>
<script type="text/javascript">
/* <![CDATA[ */
function validate(sender) {
	var element, message, res;
	do {
	element = document.getElementById("frm-name");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { message = "Enter your name"; if (element) element.focus(); alert(message); return false; }
	} while(0);

	do {
	element = document.getElementById("frm-age");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { message = "Enter your age"; if (element) element.focus(); alert(message); return false; }
	element = document.getElementById("frm-age");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = /^-?[0-9]+$/.test(val);
	if (!res) { message = "Age must be numeric value"; if (element) element.focus(); alert(message); return false; }
	element = document.getElementById("frm-age");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = parseFloat(val)>=10 && parseFloat(val)<=100;
	if (!res) { message = "Age must be in range from 10 to 100"; if (element) element.focus(); alert(message); return false; }
	} while(0);

	do {
	element = document.getElementById("frm-email");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="@";
	if (res) {
		element = document.getElementById("frm-email");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = /^[^@\s]+@[^@\s]+\.[a-z]{2,10}$/i.test(val);
		if (!res) { message = "Incorrect E-mail Address"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	do {
	element = document.getElementById("frm-send");
	var val = element.checked;
	res = (val==true);
	if (res) {
		element = document.getElementById("frm-city");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = val!='' && val!="";
		if (!res) { message = "Enter your shipping address"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	do {
	element = document.getElementById("frm-send");
	var val = element.checked;
	res = (val==true);
	if (res) {
		element = document.getElementById("frm-country");
		res = element.selectedIndex >= 1;
		if (!res) { message = "Select your country"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	do {
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { message = "Choose your password"; if (element) element.focus(); alert(message); return false; }
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val.length>=3;
	if (!res) { message = "The password is too short: it must be at least 3 characters"; if (element) element.focus(); alert(message); return false; }
	} while(0);

	do {
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = function(){
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val!='' && val!="";
	if (!res) { return false; }
	element = document.getElementById("frm-password");
	var val = element.value.replace(/^\s+|\s+$/g, '');
	res = val.length>=3;
	if (!res) { return false; }
	return true; }();
	if (res) {
		element = document.getElementById("frm-password2");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = val!='' && val!="";
		if (!res) { message = "Reenter your password"; if (element) element.focus(); alert(message); return false; }
		element = document.getElementById("frm-password2");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		res = (val==function(){var element;element = document.getElementById("frm-password");
		var val = element.value.replace(/^\s+|\s+$/g, '');
		return val;}());
		if (!res) { message = "Passwords do not match"; if (element) element.focus(); alert(message); return false; }
	}
	} while(0);

	return true;
}

function toggle(sender) {
	var element, visible, res;
	visible = true; element = document.getElementById("frm-send");
	var val = element.checked;
	res = (val==true); visible = visible && res;
	element = document.getElementById('sendBox');
	if (element) element.style.display = visible ? "" : "none";
	
}

toggle(null);
/* ]]> */
</script>
</body>
</html>
